<template>
  <div class="app-container">
    <div class="filter-container">

    </div>

    <el-card class="box-card">

      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="油卡日对账"
          name="first"
        >
          <div class="app-container">

            <div class="filter-container">

              <el-date-picker
                v-model="listQuery.startDay"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择开始日期时间"
                style="width: 200px;"
                class="filter-item"
                clearable
                @keyup.enter.native="handleFilter"
              />
              <el-date-picker
                v-model="listQuery.endDay"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择结束日期时间"
                style="width: 200px;"
                class="filter-item"
                clearable
                @keyup.enter.native="handleFilter"
              />
              <el-button
                v-waves
                class="filter-item"
                type="primary"
                icon="el-icon-search"
                @click="handleFilter"
              >
                搜索
              </el-button>

            </div>

            <el-table
              :key="key"
              :data="tableData1"
              border
              fit
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column
              label="序号"
              prop="id"
              align="center"
              width="50"
            >
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>

              <el-table-column
                prop="supplyCompany"
                label="商户名称"
                align="center"
                width=""
              />
              <el-table-column
                prop="supplyPhone"
                label="联系人"
                align="center"
                width=""
              />
              <el-table-column
                prop="date"
                label="对账日期"
                align="center"
                width="100"
              />
              <el-table-column
                prop="created"
                label="对账时间"
                align="center"
                width="140"
              />
              <el-table-column
                prop="earlyMoney"
                label="期初(元)"
                align="center"
                width="120"
              />
              <el-table-column
                prop="endMoney"
                label="期末(元)"
                align="center"
                width="120"
              />
              <el-table-column
                prop="cashMoney"
                label="期间充值(元)"
                align="center"
                width="120"
              />
              <el-table-column
                prop="tranMoeny"
                label="当前分配(元)"
                align="center"
                width="120"
              />
            </el-table>
          </div>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="getList"
          />

        </el-tab-pane>
        <el-tab-pane
          label="加油站对账"
          name="second"
        >
          <AgentVerify2></AgentVerify2>

        </el-tab-pane>

      </el-tabs>
    </el-card>

    <!--<el-dialog-->
      <!--title="转账"-->
      <!--:visible.sync="dialogFormMoney"-->
      <!--top="2vh"-->
      <!--width="600px"-->
    <!--&gt;-->
      <!--<el-form-->
        <!--ref="temp1"-->
        <!--:rules="rules"-->
        <!--:model="temp1"-->
        <!--label-position="left"-->
        <!--label-width="100px"-->
        <!--style="width: 500px; margin-left:50px;"-->
        <!--class="demo-dynamic"-->
        <!--:inline="true"-->
      <!--&gt;-->
        <!---->
        <!--<el-form-item-->
          <!--label="商户"-->
          <!--prop="oilSupplyId"-->
        <!--&gt;-->
          <!--<el-select-->
            <!--v-model="temp1.oilSupplyId"-->
            <!--placeholder="请选择商户"-->
            <!--class="filter-item"-->
            <!--clearable-->
          <!--&gt;-->
            <!--<el-option-->
              <!--v-for="item in supply"-->
              <!--:label="item.name"-->
              <!--:value="item.id"-->
            <!--/>-->
          <!--</el-select>-->
        <!--</el-form-item>-->

        <!--<el-form-item-->
          <!--label="转账金额"-->
          <!--prop="money"-->
        <!--&gt;-->
          <!--<el-input-->
            <!--v-model="temp1.money"-->
            <!--clearable-->
          <!--/>-->
        <!--</el-form-item>-->

        <!--<el-form-item-->
          <!--label="提现密码"-->
          <!--prop="password"-->
        <!--&gt;-->
          <!--<el-input-->
            <!--v-model="temp1.password"-->
            <!--type="password"-->
            <!--clearable-->
          <!--/>-->
        <!--</el-form-item>-->

        <!-- <el-form-item
          label="验证码"
          prop="code"
        >
          <el-input
            v-model="temp1.code"
            clearable
            style="width:170px"
          />
          <el-button
            type="primary"
            size="mini"
            @click="getCode()"
          >获取验证码</el-button>
        </el-form-item> -->

      <!--</el-form>-->
      <!--<div-->
        <!--slot="footer"-->
        <!--class="dialog-footer"-->
      <!--&gt;-->
        <!--<el-button @click="dialogFormMoney = false">-->
          <!--{{ $t('table.cancel') }}-->
        <!--</el-button>-->
        <!--<el-button-->
          <!--type="primary"-->
          <!--@click="trans()"-->
        <!--&gt;-->
          <!--{{ $t('table.confirm') }}-->
        <!--</el-button>-->
      <!--</div>-->
    <!--</el-dialog>-->

  </div>
</template>
<script>
import {
  addBankCard,
  bankCardList,
  getPhoneCode,
  agentGetMoney,
  unBindBankCard,
  transferWallet,
  getSupplyAll,
  getallAgent,
  walletTradeList,
  getPageOilVerify,
  getPageCooVerify
} from "@/api/v1";
import { getInfo, resetOwnerPassword, resetAgentPassword } from "@/api/user";

import AgentVerify2 from "@/components/agentVerify2";

import waves from "@/directive/waves"; // Waves directive
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { parseTime } from "@/utils";
import { MessageBox, Message } from "element-ui";

export default {
  directives: { waves },
  components: { Pagination, AgentVerify2 },
  filters: {
    roleFilter(role) {
      switch (role) {
        case 1:
          return "代理";
        case 2:
          return "商户";
        case 3:
          return "司机";
        case 5:
          return "超级管理员";
      }
    }
  },
  data() {
    return {
      total: 0,
      tableData1: [],
      tableData2: [],

      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "新增"
      },
      transBtn: false,
      allAgent: [],
      walletDate: [],
      supply: [],
      activeName: "first",
      name: "",
      phone: "",
      currentMoney: "",
      listQuery: {
        page: 1,
        limit: 20,
        sort: "+id",
//        supplyId: "",
        startDay: "",
        endDay: ""
      },

      key: 1, // table key
      walletkey: 1, // table key
      dialogFormVisible: false,
      dialogFormMoney: false,
      dialogFormMoneyTX: false,
      ruleForm: {
        oldPassword: "",
        newPassword: "",
        newPassword2: ""
      },
      payForm: {
        oldPassword: "",
        newPassword: "",
        newPassword2: ""
      },
      info: {},
      rules: {
        oldPassword: [
          { required: true, message: "请输入当前密码", trigger: "blur" }
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" }
        ],
        newPassword2: [
          { required: true, message: "请再次输入新密码", trigger: "blur" }
        ],
        oilSupplyId: [
          { required: true, message: "请选择您要转帐的商户", trigger: "change" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        money: [{ required: true, message: "请输入金额", trigger: "blur" }]
      },
      temp: {
        cardNum: "",
        openName: "",
        idCardNum: "",
        relationId: "", // 省代或油卡商户id–超管添加必传
        relationType: "" // 类型1为省代，2为油卡商户–超管添加必传
      },
      temp1: {
        oilSupplyId: "",
        money: "",
        password: ""
      },
      temp2: {
        cardNum: "",
        openName: "",
        idCardNum: "",
        relationId: "", // 省代或油卡商户id–超管添加必传
        relationType: "", // 类型1为省代，2为油卡商户–超管添加必传
        money: ""
      },
      isAgentSub: false
    };
  },
  watch: {
    checkboxVal(valArr) {
      this.formThead = this.formTheadOptions.filter(
        i => valArr.indexOf(i) >= 0
      );
      this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
      this.walletkey = this.walletkey + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
    }
  },

  created() {
//    this.listQuery.supplyId=localStorage.getItem("id");
    this.getList();
  },
  methods: {
    resetTemp() {
      this.temp.cardNum = "";
      this.temp.openName = "";
      this.temp.idCardNum = "";
    },
    createData() {
      this.$refs["temp"].validate(valid => {
        if (valid) {
          console.log(this.temp);
          addBankCard(this.temp).then(res => {
            // this.list.unshift(this.temp);
            this.dialogFormVisible = false;
            this.$notify({
              title: "成功",
              message: res.msg,
              type: "success",
              duration: 2000
            });
            this.getList();
          });
        }
      });
    },
    getList() {
      this.listLoading = true;
      getPageOilVerify(this.listQuery).then(res => {
        this.tableData1 = res.data.records;
        this.total = Number(res.data.total);
        console.log(this.tableData);
      });
    },
    handleCreate() {
      this.resetTemp();
      console.log(this.temp);
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["temp"].clearValidate();
      });
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    }
  }
};
</script>
<style>
.el-row {
  margin: 20px;
}
</style>

